<!DOCTYPE html>
<html>
<head>
    <title>AI笔记生成器</title>
    <style>
        body { font-family: Arial; max-width: 800px; margin: 0 auto; padding: 20px; }
        textarea { width: 100%; height: 100px; margin-bottom: 10px; }
        button { padding: 10px 15px; background: #4CAF50; color: white; border: none; cursor: pointer; }
        #result { margin-top: 20px; white-space: pre-wrap; }
    </style>
</head>
<body>
    <h1>AI笔记生成器</h1>
    <textarea id="prompt" placeholder="输入你想生成笔记的主题..."></textarea>
    <button onclick="generateNote()">生成笔记</button>
    <div id="result"></div>

    <script>
        async function generateNote() {
            const prompt = document.getElementById('prompt').value;
            const resultDiv = document.getElementById('result');

            resultDiv.innerHTML = '生成中...';

            try {
                const response = await fetch('/generate-note', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ prompt })
                });
                const data = await response.json();
                resultDiv.innerHTML = data.note;
            } catch (err) {
                resultDiv.innerHTML = '错误: ' + err.message;
            }
        }
    </script>
</body>
</html>
